<!DOCTYPE html>

<head>
	<meta charset="utf-8">
	<title>关联分析</title>
	<!--//该页面应用的是echarts2.0-->
	<script src="lib/echarts-2.2.7/build/dist/echarts.js"></script>
	<!--引入Jquery-->
	<script type="text/javascript" src="lib/jquery-3.1.1.js"></script>
	<!--引入bootstrap文件-->
	<link rel="stylesheet" type="text/css" href="lib/bootstrap-3.3.7/css/bootstrap.min.css">
	<script src="lib/bootstrap-3.3.7/js/bootstrap.min.js"></script>
	<!--以下的引用全部和同源攻击相同-->
	<!--精确到秒的datapiker-->
	<link type="text/css" href="lib/common_attack_source_analysis/css/jquery-ui-1.8.17.custom.css" rel="stylesheet" />
	<link type="text/css" href="lib/common_attack_source_analysis/css/jquery-ui-timepicker-addon.css" rel="stylesheet" />
	<script type="text/javascript" src="lib/common_attack_source_analysis/js/jquery-1.7.1.min.js"></script>
	<script type="text/javascript" src="lib/common_attack_source_analysis/js/jquery-ui-1.8.17.custom.min.js"></script>
	<script type="text/javascript" src="lib/common_attack_source_analysis/js/jquery-ui-timepicker-addon.js"></script>
	<script type="text/javascript" src="lib/common_attack_source_analysis/js/jquery-ui-timepicker-zh-CN.js"></script>
	<!--带提示的输入框-->
	<link type="text/css" rel="stylesheet" href="lib/common_attack_source_analysis/css/fm.tagator.jquery.css" />

	<script type="text/javascript" src="lib/common_attack_source_analysis/js/fm.tagator.jquery.js"></script>

</head>

<body>

	<script>
		//通过ajax获取到补全项目
		/*等待联调*/
		//var data =接口（）；

		$.ajaxSetup({
			async: false
		});

		$.get('static/data/correlation_analysis/data.json', function(data) {
			threat_array = [];
			var category = data.data.category;
			category.forEach(function(item, i) {
				threat_array.push(item.name);
			});

		});
		//console.log(ips_array);
	</script>
	<script>
		//自动补全
		$(function() {

			if($('#inputTagator').data('tagator') === undefined) {
				$('#inputTagator').tagator({
					autocomplete: threat_array
				});

			} else {
				$('#inputTagator').tagator('destroy');

			}

		})
	</script>

	<div class="row" style="align-content: center;">
		<center>
			<span>起始时间：<input type="text" id="start_time" class="ui_timepicker" value=""></span>
			<span>结束时间：<input type="text" id="end_time" class="ui_timepicker" value=""></span>
			<div class="row">安全事件(一个或者多个)：<input id="inputTagator" name="inputTagator" class="inputTagator" style="width: 600px;height: 400px;">
				<button id="getvalue" type="button" class="btn btn-success">生成关联分析图</button>

			</div>

		</center>
	</div>

	<script>
		$(function() {
			$(".ui_timepicker").datetimepicker({
				//showOn: "button",
				//buttonImage: "./css/images/icon_calendar.gif",
				//buttonImageOnly: true,
				showSecond: true,
				timeFormat: 'hh:mm:ss',
				stepHour: 1,
				stepMinute: 1,
				stepSecond: 1
			})
		})
	</script>
	<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
	<center>
		<div id="main" style="height:600px" style="margin-top: 5%;"></div>
	</center>

	<script type="text/javascript">
		$("#getvalue").click(function() {
			var search_string = $("#inputTagator").val();
			if(search_string === "")
				alert("请输入安全事件名称");
			else {
				var fair_array = [];
				fair_array = search_string.split(",");
				var start_time = $("#start_time").val();
				var end_time = $("#end_time").val();
				//console.log(ip_array,start_time,end_time);

				//var data = jiekou;
				// 路径配置
				require.config({
					paths: {
						echarts: 'lib/echarts-2.2.7/build/dist'
					}
				});

				// 使用
				require(
					[
						'echarts',
						'echarts/chart/force', // 使用力导向图图就加载bar模块，按需加载
						'echarts/chart/chord'
					],

					function(ec) {
						$.ajaxSetup({
							async: false
						});
						var default_att_size = 50;
						var default_under_size = 5;
						var default_weight = 1;

						var force_nodes = [];
						var force_links = [];
						var force_categories = [];
						var legend_content = [];
						//构造输入数据格式
						var input_data = {};
						input_data.sjmc = fair_array;
						input_data.starttime = start_time;
						input_data.endtime = end_time;
						//console.log(input_data);
						/*等待联调*/
						//var data =接口（）；

						$.get('static/data/correlation_analysis/data.json', function(data) {

							data.data.category.forEach(function(item, i) {
								var category = {};
								legend_content.push(item.name);
								category = item;
								force_categories.push(category);

							});

							data.data.nodes.forEach(function(item, i) {
								var force_node = {};
								force_node.name = item.name;
								force_node.category = item.category;

								force_node.value = default_att_size + i * 10; //无依据的+i*10

								force_nodes.push(force_node);

							});

							data.data.links.forEach(function(item_link, i_link) {
								var force_link = {};

								force_link.source = item_link.source;
								force_link.target = item_link.target;
								force_link.name = item_link.value;
								force_link.weight = default_weight + i_link; //无依据的+i_link
								force_links.push(force_link);
							});

						});

						console.log(force_nodes, force_links);

						// 基于准备好的dom，初始化echarts图表,声明为全局变量
						var myChart = ec.init(document.getElementById('main'));

						var option = {
							title: {
								text: '关联分析',
								subtext: '数据XX',
								x: 'right',
								y: 'bottom'
							},
							tooltip: {
								trigger: 'item',
								formatter: '{a} : {b}'
							},
							toolbox: {
								show: true,
								feature: {
									restore: {
										show: true
									},
									magicType: {
										show: true,
										type: ['force', 'chord']
									},
									//							saveAsImage: {
									//								show: true
									//							}
								}
							},
							legend: {
								x: 'left',
								data: legend_content
							},
							series: [{
								type: 'force',
								name: "关联分析",
								ribbonType: false,
								linkSymbol: 'arrow',
								categories: force_categories,
								itemStyle: {
									normal: {
										label: {
											show: true,
											textStyle: {
												color: '#333'
											}
										},
										nodeStyle: {
											brushType: 'both',
											borderColor: 'rgba(255,215,0,0.4)',
											borderWidth: 1
										},
										linkStyle: {
											type: 'curve'
										}
									},
									emphasis: {
										label: {
											show: false
												// textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
										},
										nodeStyle: {
											//r: 30
										},
										linkStyle: {}
									}
								},
								useWorker: false,
								minRadius: 15,
								maxRadius: 25,
								gravity: 1.1,
								scaling: 1.1,
								roam: 'move',
								nodes: force_nodes,
								links: force_links
							}]
						};
						//调试用，后续点击事件等
						//				var ecConfig = require('echarts/config');
						//
						//				function focus(param) {
						//					var data = param.data;
						//					var links = option.series[0].links;
						//					var nodes = option.series[0].nodes;
						//					if(
						//						data.source !== undefined &&
						//						data.target !== undefined
						//					) { //点击的是边
						//						var sourceNode = nodes.filter(function(n) {
						//							return n.name == data.source
						//						})[0];
						//						var targetNode = nodes.filter(function(n) {
						//							return n.name == data.target
						//						})[0];
						//						console.log("选中了边 " + sourceNode.name + ' -> ' + targetNode.name + ' (' + data.weight + ')');
						//					} else { // 点击的是点
						//						console.log("选中了" + data.name + '(' + data.value + ')');
						//					}
						//				}
						//				myChart.on(ecConfig.EVENT.CLICK, focus)
						//
						//				myChart.on(ecConfig.EVENT.FORCE_LAYOUT_END, function() {
						//					console.log(myChart.chart.force.getPosition());
						//				});

						// 为echarts对象加载数据 
						myChart.setOption(option);
					}
				);

			}
		});
	</script>
</body>